<!-- 月度收付款 -->
<template>
  <div class="content">
    <el-card class="box-card">
      <div slot="header">
        <span style="color: rgb(14, 175, 14);">月度收付款</span>
      </div>
      <div id="monColChart" style="width: 100%;height:370px"></div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      chart: undefined
    }
  },
  props: {
    tabNum: {
      type: String,
      default: '0'
    }
  },
  watch: {
    tabNum() {
      this.$nextTick(() => {
        this.chart.resize();
      });
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  methods: {
    initChart() {
      const ctx = document.getElementById('monColChart')
      this.chart = echarts.init(ctx)

      let XData = ['03-15', '03-16', '03-17', '03-18', '03-19', '03-20', '03-21']
      let valueData = {
          data1: [64, 659, 112, 86, 151, 131, 118],
          data2: [124, 30, 77, 97, 456, 75, 99,560],
          data3: [12, 489, 77, 107, 459, 75, 78,123,456],
          data4: [123, 589, 55, 789, 99, 128, 159]
      }
      let option = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
        },
        grid: {
            top: 'middle',
            left: '3%',
            right: '4%',
            bottom: '3%',
            height: '80%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: XData,
            axisLine: {
                lineStyle: {
                    color: 'rgba(193, 207, 220, 1)',
                }
            },
            axisLabel: {
                textStyle: {
                    color: "rgba(0, 0, 0, 1)"
                }
            },
        },
        yAxis: [{
            name: '单位(mm)',
            type: 'value',
            axisLabel: {
                textStyle: {
                    color: "rgba(0, 0, 0, 1)"
                }
            },
            axisLine: {
                show: false,
                lineStyle: {
                    color: '#cdd5e2'
                }
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(193, 207, 220, 1)',
                }
            },
        }
        ],
        series: [{
            name: '三北六期',
            type: 'line',
            data: valueData.data1,
            symbolSize: 9, //标记的大小
            lineStyle: {
                normal: {
                    width: 2,
                    color: '#16A1FA',
                    shadowColor: 'rgba(22, 161, 250, 0.5)',
                    shadowBlur: 10,
                    shadowOffsetY: 7
                }
            },
            itemStyle: {
                normal: {
                    color: 'rgba(22, 161, 250, 1)',
                }
            },
            smooth: true
        },
        {
            name: '蓝旗机器人造林',
            type: 'line',
            data: valueData.data2,
            symbolSize: 9, //标记的大小
            lineStyle: {
                normal: {
                    width: 2,
                    color: '#66E1DF',
                    shadowColor: '#66E1DF',
                    shadowBlur: 10,
                    shadowOffsetY: 7
                }
            },
            itemStyle: {
                normal: {
                    color: '#66E1DF',
                }
            },
            smooth: true
        },
        {
            name: '风光一体化防沙治沙',
            type: 'line',
            data: valueData.data3,
            symbolSize: 9, //标记的大小
            lineStyle: {
                normal: {
                    width: 2,
                    color: '#E3F170',
                    shadowColor: '#E3F170',
                    shadowBlur: 10,
                    shadowOffsetY: 7
                }
            },
            itemStyle: {
                normal: {
                    color: '#E3F170',
                }
            },
            smooth: true
        },
        {
            name: '蚂蚁森林',
            type: 'line',
            data: valueData.data4,
            symbolSize: 9, //标记的大小
            lineStyle: {
                normal: {
                    width: 2,
                    color: '#ffda49',
                    shadowColor: '#ffda49',
                    shadowBlur: 10,
                    shadowOffsetY: 7
                }
            },
            itemStyle: {
                normal: {
                    color: '#ffda49',
                }
            },
            smooth: true
        }
        ]
      }
      this.chart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  display: flex;
}
</style>
